<script setup lang="ts">
import { ref, reactive } from 'vue';
const tablist = reactive({
    changlist: '产品矩阵',
    list: ['创意工具', '灵感交流', '服务帮助', '合作伙伴', '公司信息', '社交媒体']
});
const trlist = reactive({
    list: ['H5', '海报', '长页', '表单', '互动', '视频', '电子画册', '秀站']
});
// 创意
const originality = reactive({
    originality: '创意工具',
    list: ['红包', '打赏', '短信通知', '二维码美化', '智能抠图', '文字云', '拼图', '智能海报', '一键快闪']
});
// 灵感
const inspiration = reactive({
    inspiration: '灵感交流',
    list: ['用户社区', '创意课堂', '客户案例', '精选推荐', '热门作品', '营销日历']
});
// 服务
const service = reactive({
    service: '服务帮助',
    list: ['审核规则', '作品审核', '网站地图', '热门模块', '客服中心', '帮助中心', '隐私协议']
});
// 合作
const cooperation = reactive({
    cooperation: '合作伙伴',
    list: ['设计师招募', '正版素材商', '内容中台', '内容安全审核']
});
// 公司信息
const message = reactive({
    message: '公司信息',
    list: ['关于我们', '人才招聘', '公司动态', '荣誉奖项', '商务合作']
});
// 社交媒体
const medium = reactive({
    medium: '社交媒体',
    list: ['微信公众号', '官方微博', '视频号']
});
const mailbox = ref();
const account = ref();
const video = ref();
const moservice = (index: any) => {
    if (index === 4) {
        mailbox.value.style = `display:block;`;
    }
};
const mout = () => {
    mailbox.value.style = `display:none;`;
};

const momedium = (index: any) => {
    if (index === 0) {
        account.value.style = `display:block;`;
    }
    if (index === 2) {
        video.value.style = `display:block`;
    }
};
const mousout = () => {
    video.value.style = `display:none`;
    account.value.style = `display:none;`;
};

</script>

<template>
    <div class="footer-main">
        <div class="footer-main-left">
            <h3>{{ tablist.changlist }}</h3>
            <p v-for="(item, index) in trlist.list" :key="index">{{ item }}</p>
        </div>
        <div class="footer-main-left">
            <h3>{{ originality.originality }}</h3>
            <p v-for="(item, index) in originality.list" :key="index">{{ item }}</p>
        </div>
        <div class="footer-main-left">
            <h3>{{ inspiration.inspiration }}</h3>
            <p v-for="(item, index) in inspiration.list" :key="index">{{ item }}</p>
        </div>
        <div class="footer-main-left">
            <h3>{{ service.service }}</h3>
            <p v-for="(item, index) in service.list" :key="index" @mouseover="moservice(index)" @mouseout="mout()">{{ item
            }}</p>
        </div>
        <div class="footer-main-left">
            <h3>{{ cooperation.cooperation }}</h3>
            <p v-for="(item, index) in cooperation.list" :key="index">{{ item }}</p>
        </div>
        <div class="footer-main-left">
            <h3>{{ message.message }}</h3>
            <p v-for="(item, index) in message.list" :key="index">{{ item }}</p>
        </div>
        <div class="footer-main-left">
            <h3>{{ medium.medium }}</h3>
            <p v-for="(item, index) in medium.list" :key="index" @mouseover="momedium(index)" @mouseout="mousout()">{{ item
            }}</p>
        </div>
    </div>
    <div class="mailbox" ref="mailbox">
        <p>邮箱:vip@eqxiu.com</p>
        <p>电话:010-58103389</p>
        <p>时间:9:00-18:00(工作日)</p>

    </div>
    <div class="account" ref="account">
        <img src="../img/3.png" alt="">
        <p>扫描上方二维码</p>
        <p>关注“易企秀”微信公众号</p>
    </div>
    <div class="video" ref="video">
        <img src="../img/4.png" alt="">
        <p>扫描上方二维码</p>
        <p>关注“易企秀”视颍号</p>
    </div>
</template>

<style scoped>
.footer-main {
    flex: 1;
    height: 100%;
    margin-left: 20px;
}

.footer-main-left {
    width: 90px;
    height: 100%;
    float: left;
    margin-left: 10px;
}

.footer-main-left p {
    font-size: 12px;
    margin-top: 32px;
}

.footer-main-left p:hover {
    cursor: pointer;
    color: #2C72FF;
}

.mailbox {
    width: 200px;
    height: 100px;
    background-color: #fff;
    position: absolute;
    left: 400px;
    top: 220px;
    text-align: center;
    display: none;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.mailbox p {
    font-size: 10px;
}

.account {
    width: 200px;
    height: 230px;
    background: #fff;
    display: none;
    position: absolute;
    left: 700px;
    top: 7px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.account p {
    text-align: center;
    font-size: 14px;
}

.account img {
    width: 120px;
    height: 110px;
    display: inline-block;
    margin-left: 40px;
    margin-top: 35px;
}

.video {
    width: 200px;
    height: 230px;
    background: #fff;
    display: none;
    position: absolute;
    left: 700px;
    top: 100px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.video img {
    width: 120px;
    height: 110px;
    display: inline-block;
    margin-left: 40px;
    margin-top: 35px;
}

.video p {
    text-align: center;
    font-size: 14px;
}
</style>